<template>
  <div>
    <el-form
      :model="friendForm"
      :rules="rules"
      ref="FriendForm"
      label-width="80px"
    >
      <el-form-item
        label="用户名"
        prop="name"
      >
        <el-input
          placeholder="请输入用户名"
          v-model="friendForm.name"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="选择分组"
        prop="organizationId"
      >
        <el-select
          v-model="friendForm.organizationId"
          placeholder="请选择分组"
        >
          <el-option
            v-for="organization in organizations"
            :key="organization.organizationId"
            :label="organization.organizationName"
            :value="organization.organizationId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="备注信息"
        prop="remarkInfo"
      >
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入备注信息"
          v-model="friendForm.remarkInfo"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <form-button
      :loading="submitLoading"
      @submit="submitForm('FriendForm')"
      @cancel="cancelSubmit"
    />
  </div>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
import { applyFriend } from '@/api/social'
export default {
  name: 'AddFriendForm',
  props: {
    user: {
      type: Object,
      required: true
    },
    organizationId: {
      type: Number,
      required: false
    }
  },
  data () {
    return {
      friendForm: {
        friendId: '',
        name: '',
        organizationId: '',
        remarkInfo: '我是'
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        organizationId: [
          { required: true, message: '请输入群组名', trigger: 'blur' }
        ]
      },
      submitLoading: false
    }
  },
  computed: {
    ...mapGetters({
      organizations: 'organizations'
    })
  },
  methods: {
    ...mapActions({
      setOrganizations: 'contact/setOrganizations'
    }),
    reset () {
      this.friendForm.name = this.defaultNickname()
      this.friendForm.friendId = this.user.userId
      this.handleOrganizationInfo()
    },
    defaultNickname () {
      return this.user.userName ||
        this.user.loginName ||
        this.user.phonenumber ||
        '未命名'
    },
    // 获取分组信息
    async handleOrganizationInfo () {
      await this.setOrganizations()
      if (this.organizationId) {
        this.friendForm.organizationId = this.organizationId
      } else {
        this.friendForm.organizationId = this.organizations[0].organizationId
      }
    },
    // 取消提交
    cancelSubmit () {
      this.$emit('cancel')
    },
    // 提交修改表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleApplyFriend()
        } else {
          return false
        }
      })
    },
    // 申请添加好友
    async handleApplyFriend () {
      const { friendId, organizationId, remarkInfo } = this.friendForm
      try {
        this.submitLoading = true
        const { data } = await applyFriend(friendId, organizationId, remarkInfo)
        this.submitLoading = false
        if (data) {
          this.$message.success(data)
        } else {
          this.$message.success('已发送好友申请')
        }
        this.$emit('submit')
      } catch {
        this.submitLoading = false
      }
    }
  }
}
</script>
